
export default {
  data () {
    return {
      rolesList: [],
      // 编辑用户数据 控制对话框的显示和隐藏
      isShowRoleEditDialog: false,
      // 用户编辑比表单数据
      roleEditForm: {
        roleName: '',
        roleDesc: '',
        id: -1
      },
      // 控制分配权限对话框的展示和隐藏
      isShowRoleDialog: false,
      // 树形控件的数据
      rightsTree: [],
      defaultProps: {
        // children: 'children,
        label: 'authName'
      },
      // 当前被分配权限的角色id
      roleId: -1
    }
  },
  created () {
    this.getRolesList()
    // 获取权限树形结构列表
    this.getRightsTree()
  },
  methods: {
    async getRolesList () {
      const res = await this.$http.get('/roles')
      this.rolesList = res.data.data
    },
    // 删除用户
    async delRole (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const res = await this.$http.delete(`roles/${id}`)
        // 刷新页面
        this.getRolesList(1, this.searchText)
        //
        this.$message({
          type: 'success',
          message: res.data.meta.msg
        })
      } catch (err) {
        // 取消删除
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 展示用户编辑对话框
    showRoleEditDialog (curUser) {
      this.isShowRoleEditDialog = true
      // 给用户编辑表单提供数据
      for (let key in this.roleEditForm) {
        this.roleEditForm[key] = curUser[key]
      }
    },
    // 编辑用户
    async editRole () {
      const {roleName, roleDesc} = this.roleEditForm
      const res = await this.$http.put(`/roles/${this.roleEditForm.id}`, {
        roleName,
        roleDesc
      })
      // 编辑成功后 关闭对话框
      this.isShowRoleEditDialog = false
      // 刷新列表数据
      this.getRolesList()
      // 提示更新成功
      this.$message({
        type: 'success',
        message: res.data.meta.msg
      })
    },
    // 展示分配权限对话框
    showRoleDialog (curRole) {
      // curRole 表示当前角色的数据，children属性是当前角色拥有的权限
      console.log('showRoleDialog', curRole)
      // 展示对话框
      this.isShowRoleDialog = true

      // 暂存角色id
      this.roleId = curRole.id
      this.$nextTick(() => {
        // 选中指定的节点
        // 说明：应该获取 最后一级节点（叶子节点） 并且设置为选中，父级会自动被选中
        const checkedKeys = []
        // 遍历一级节点
        curRole.children.forEach(level1 => {
          // 遍历二级节点
          level1.children.forEach(level2 => {
            // 遍历三级节点
            level2.children.forEach(level3 => {
              // 收集 三级节点 的id
              checkedKeys.push(level3.id)
            })
          })
        })
        this.$refs.tree.setCheckedKeys(checkedKeys)
      })
    },
    // 获取所有权限Tree列表 （树形结构）
    async getRightsTree () {
      const res = await this.$http.get('/rights/tree')

      this.rightsTree = res.data.data
    },
    // 给角色分配权限
    async assignRights () {
      // 注意：需要拿到所有选中的解点，既包括全选中的也包括半选中的
      // console.log('获取选中节点：', this.$refs.tree.getCheckedKeys())
      // console.log('获取半选中节点：', this.$refs.tree.getHalfCheckedKeys())
      // 全选中的key
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      // 半选中的key
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      // const allKeys = checkedKeys.concat(halfCheckedKeys)

      // ES6中的数组扩展运算符：
      // const allKeys = [109, 102, 107]
      const allKeys = [...checkedKeys, ...halfCheckedKeys]
      console.log(allKeys)

      // 发送请求，分配权限
      const res = await this.$http.post(`/roles/${this.roleId}/rights`, {
        rids: allKeys.join(',')
      })
      console.log(res)
      // 1 关闭对话框
      this.isShowRoleDialog = false
      // 2 刷新列表
      this.getRolesList()
      // 3 提示分配成功
      this.$message({
        type: 'success',
        message: res.data.meta.msg
      })
    }
  }
}
